<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="70px">
      <el-form-item label="单据编号" prop="orderId">
        <el-input
          v-model="queryParams.orderId"
          placeholder="请输入单据编号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="销售日期" prop="orderDate">
        <el-date-picker clearable
                        v-model="queryParams.orderDate"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="请选择销售日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="销售员" prop="salesPerson">
        <el-input
          v-model="queryParams.salesPerson"
          placeholder="请输入销售员"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <!--      <el-form-item label="销售金额" prop="jiner">-->
<!--        <el-input-->
<!--          v-model="queryParams.jiner"-->
<!--          placeholder="请输入销售金额"-->
<!--          clearable-->
<!--          @keyup.enter.native="handleQuery"-->
<!--        />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="付款方式" prop="paymentMethod">-->
<!--        <el-input-->
<!--          v-model="queryParams.paymentMethod"-->
<!--          placeholder="请输入付款方式"-->
<!--          clearable-->
<!--          @keyup.enter.native="handleQuery"-->
<!--        />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="经手人" prop="chukuJingshouren">-->
<!--        <el-input-->
<!--          v-model="queryParams.chukuJingshouren"-->
<!--          placeholder="请输入经手人"-->
<!--          clearable-->
<!--          @keyup.enter.native="handleQuery"-->
<!--        />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="仓库" prop="chukuCangku">-->
<!--        <el-input-->
<!--          v-model="queryParams.chukuCangku"-->
<!--          placeholder="请输入仓库"-->
<!--          clearable-->
<!--          @keyup.enter.native="handleQuery"-->
<!--        />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="商品编号" prop="goodId">-->
<!--        <el-input-->
<!--          v-model="queryParams.goodId"-->
<!--          placeholder="请输入商品编号"-->
<!--          clearable-->
<!--          @keyup.enter.native="handleQuery"-->
<!--        />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="商品名称" prop="goodName">-->
<!--        <el-input-->
<!--          v-model="queryParams.goodName"-->
<!--          placeholder="请输入商品名称"-->
<!--          clearable-->
<!--          @keyup.enter.native="handleQuery"-->
<!--        />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="商品规格" prop="goodGuige">-->
<!--        <el-input-->
<!--          v-model="queryParams.goodGuige"-->
<!--          placeholder="请输入商品规格"-->
<!--          clearable-->
<!--          @keyup.enter.native="handleQuery"-->
<!--        />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="数量" prop="shuliang">-->
<!--        <el-input-->
<!--          v-model="queryParams.shuliang"-->
<!--          placeholder="请输入数量"-->
<!--          clearable-->
<!--          @keyup.enter.native="handleQuery"-->
<!--        />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="销售单价" prop="chukuDanjia">-->
<!--        <el-input-->
<!--          v-model="queryParams.chukuDanjia"-->
<!--          placeholder="请输入销售单价"-->
<!--          clearable-->
<!--          @keyup.enter.native="handleQuery"-->
<!--        />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="总部底价" prop="zongbudijia">-->
<!--        <el-input-->
<!--          v-model="queryParams.zongbudijia"-->
<!--          placeholder="请输入总部底价"-->
<!--          clearable-->
<!--          @keyup.enter.native="handleQuery"-->
<!--        />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="底价" prop="dijia">-->
<!--        <el-input-->
<!--          v-model="queryParams.dijia"-->
<!--          placeholder="请输入底价"-->
<!--          clearable-->
<!--          @keyup.enter.native="handleQuery"-->
<!--        />-->
<!--      </el-form-item>-->
      <el-form-item label="备注" prop="beizhu">
        <el-input
          v-model="queryParams.beizhu"
          placeholder="请输入备注"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
<!--      <el-form-item label="商品类别" prop="shangpinLeibie">-->
<!--        <el-input-->
<!--          v-model="queryParams.shangpinLeibie"-->
<!--          placeholder="请输入商品类别"-->
<!--          clearable-->
<!--          @keyup.enter.native="handleQuery"-->
<!--        />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="墙厚" prop="qianghou">-->
<!--        <el-input-->
<!--          v-model="queryParams.qianghou"-->
<!--          placeholder="请输入墙厚"-->
<!--          clearable-->
<!--          @keyup.enter.native="handleQuery"-->
<!--        />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="生产宽" prop="sjsckuan">-->
<!--        <el-input-->
<!--          v-model="queryParams.sjsckuan"-->
<!--          placeholder="请输入生产宽"-->
<!--          clearable-->
<!--          @keyup.enter.native="handleQuery"-->
<!--        />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="生产高" prop="sjscgao">-->
<!--        <el-input-->
<!--          v-model="queryParams.sjscgao"-->
<!--          placeholder="请输入生产高"-->
<!--          clearable-->
<!--          @keyup.enter.native="handleQuery"-->
<!--        />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="五金" prop="wujing">-->
<!--        <el-input-->
<!--          v-model="queryParams.wujing"-->
<!--          placeholder="请输入五金"-->
<!--          clearable-->
<!--          @keyup.enter.native="handleQuery"-->
<!--        />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="总金额" prop="zhonjine">-->
<!--        <el-input-->
<!--          v-model="queryParams.zhonjine"-->
<!--          placeholder="请输入总金额"-->
<!--          clearable-->
<!--          @keyup.enter.native="handleQuery"-->
<!--        />-->
<!--      </el-form-item>-->


      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
        >新增</el-button>
      </el-col>
<!--      <el-col :span="1.5">-->
<!--        <el-button-->
<!--          type="success"-->
<!--          plain-->
<!--          icon="el-icon-edit"-->
<!--          size="mini"-->
<!--          :disabled="single"-->
<!--          @click="handleUpdate"-->
<!--        >修改</el-button>-->
<!--      </el-col>-->
<!--      <el-col :span="1.5">-->
<!--        <el-button-->
<!--          type="danger"-->
<!--          plain-->
<!--          icon="el-icon-delete"-->
<!--          size="mini"-->
<!--          :disabled="multiple"-->
<!--          @click="handleDelete"-->
<!--        >删除</el-button>-->
<!--      </el-col>-->
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="orderList" :summary-method="getSummariesOrder"
              show-summary @selection-change="handleSelectionChange">
<!--      <el-table-column type="selection" width="55" align="center" />-->
<!--      <el-table-column label="编号" align="center" prop="id" />-->
      <el-table-column label="单据编号" align="center" prop="orderId" />
      <el-table-column label="销售日期" align="center" prop="orderDate" width="180">
        <template slot-scope="scope">
          {{ parseTime(scope.row.orderDate, '{y}-{m}-{d} {h}:{i}:{s}') }}
        </template>
      </el-table-column>
      <el-table-column label="销售金额(￥)" align="center" prop="orderPrice" >
        <template v-slot="scope">
          <span>{{scope.row.orderPrice | rounding}}</span>
        </template>
      </el-table-column>
<!--      <el-table-column label="付款方式" align="center" prop="paymentMethod" />-->
      <el-table-column label="操作员" align="center" prop="salesPerson" />
      <el-table-column label="备注" align="center" prop="beizhu" />
<!--      <el-table-column label="仓库" align="center" prop="chukuCangku" />-->
<!--      <el-table-column label="商品编号" align="center" prop="goodId" />-->
<!--      <el-table-column label="商品名称" align="center" prop="goodName" />-->
<!--      <el-table-column label="商品规格" align="center" prop="goodGuige" />-->
<!--      <el-table-column label="数量" align="center" prop="shuliang" />-->
<!--      <el-table-column label="销售单价" align="center" prop="chukuDanjia" />-->
<!--      <el-table-column label="总部底价" align="center" prop="zongbudijia" />-->
<!--      <el-table-column label="底价" align="center" prop="dijia" />-->
<!--      <el-table-column label="备注" align="center" prop="beizhu" />-->
<!--      <el-table-column label="商品类别" align="center" prop="shangpinLeibie" />-->
<!--      <el-table-column label="墙厚" align="center" prop="qianghou" />-->
<!--      <el-table-column label="实际生产宽" align="center" prop="sjsckuan" />-->
<!--      <el-table-column label="实际生产高" align="center" prop="sjscgao" />-->
<!--      <el-table-column label="五金" width="200" align="center" prop="wujing" />-->
<!--      <el-table-column label="总金额" align="center" prop="zhonjine" />-->
<!--      <el-table-column label="图片" align="center" prop="tupian" />-->
<!--      <el-table-column label="${comment}" align="center" prop="tupian2" />-->
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
<!--          <el-button-->
<!--            size="mini"-->
<!--            type="text"-->
<!--            icon="el-icon-edit"-->
<!--            @click="handleUpdate(scope.row)"-->
<!--          >修改</el-button>-->
<!--          <el-button-->
<!--            size="mini"-->
<!--            type="text"-->
<!--            icon="el-icon-delete"-->
<!--            @click="handleDelete(scope.row)"-->
<!--          >删除</el-button>-->
          <el-button
             size="mini"
             type="text"
             icon="el-icon-view"
             @click="handleViewGoods(scope.row)"
          >查看商品</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改销售出库对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="1200px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
<!--        <el-form-item label="单据编号" prop="chukuDanhao" class="grid-xs-7">-->
<!--          <el-input v-model="form.chukuDanhao" placeholder="请输入单据编号" />-->
<!--        </el-form-item>-->
        <el-form-item label="销售日期" prop="orderDate">
          <el-date-picker clearable
                          v-model="form.orderDate"
                          type="datetime"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          placeholder="请选择销售日期">
          </el-date-picker>
        </el-form-item>
<!--        <el-form-item label="销售金额" prop="jiner" class="grid-xs-7">-->
<!--          <el-input v-model="form.jiner" placeholder="请输入销售金额" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="付款方式" prop="paymentMethod" class="grid-xs-7">-->
<!--          <el-input v-model="form.paymentMethod" placeholder="请输入付款方式" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="经手人" prop="chukuJingshouren" class="grid-xs-7">-->
<!--          <el-input v-model="form.chukuJingshouren" placeholder="请输入经手人" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="仓库" prop="chukuCangku" class="grid-xs-7">-->
<!--          <el-input v-model="form.chukuCangku" placeholder="请输入仓库" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="商品编号" prop="goodId" class="grid-xs-7">-->
<!--          <el-input v-model="form.goodId" placeholder="请输入商品编号" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="商品名称" prop="goodName" class="grid-xs-7">-->
<!--          <el-input v-model="form.goodName" placeholder="请输入商品名称" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="商品规格" prop="goodGuige" class="grid-xs-7">-->
<!--          <el-input v-model="form.goodGuige" placeholder="请输入商品规格" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="数量" prop="shuliang" class="grid-xs-7">-->
<!--          <el-input v-model="form.shuliang" placeholder="请输入数量" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="销售单价" prop="chukuDanjia" class="grid-xs-7">-->
<!--          <el-input v-model="form.chukuDanjia" placeholder="请输入销售单价" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="总部底价" prop="zongbudijia" class="grid-xs-7">-->
<!--          <el-input v-model="form.zongbudijia" placeholder="请输入总部底价" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="底价" prop="dijia" class="grid-xs-7">-->
<!--          <el-input v-model="form.dijia" placeholder="请输入底价" />-->
<!--        </el-form-item>-->
        <el-form-item label="备注" prop="beizhu" class="grid-xs-7">
          <el-input v-model="form.beizhu" placeholder="请输入备注" />
        </el-form-item>
<!--        <el-form-item label="商品类别" prop="shangpinLeibie" class="grid-xs-7">-->
<!--          <el-input v-model="form.shangpinLeibie" placeholder="请输入商品类别" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="墙厚" prop="qianghou" class="grid-xs-7">-->
<!--          <el-input v-model="form.qianghou" placeholder="请输入墙厚" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="实际生产宽" prop="sjsckuan" class="grid-xs-7">-->
<!--          <el-input v-model="form.sjsckuan" placeholder="请输入实际生产宽" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="实际生产高" prop="sjscgao" class="grid-xs-7">-->
<!--          <el-input v-model="form.sjscgao" placeholder="请输入实际生产高" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="五金" prop="wujing" class="grid-xs-7">-->
<!--          <el-input v-model="form.wujing" placeholder="请输入五金" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="总金额" prop="zhonjine" class="grid-xs-7">-->
<!--          <el-input v-model="form.zhonjine" placeholder="请输入总金额" />-->
<!--        </el-form-item>-->
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="primary"
              plain
              icon="el-icon-plus"
              size="mini"
              @click="handleAddRow"
            >添加商品</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="danger"
              plain
              icon="el-icon-delete"
              size="mini"
              :disabled="multiplegoods"
              @click="handleDeleteRow"
            >删除</el-button>
          </el-col>
          <el-col :span="1.5">
          <el-switch v-model="autored_disable" @change="autoredchange(autored_disable)" active-text="扫码枪录入" style="height: 25px"></el-switch>
          <el-input
            ref="spidinput"
            type="textarea"
            v-model="textarea_auto"
            placeholder=""
            @blur="saomablur"
            @input="autoread(textarea_auto)"
            style="position:fixed;top:-100%"
          >
          </el-input>
          </el-col>
        </el-row>
        <el-table v-loading="loading" height="480px" :data="form.orderGoodsList" @selection-change="handleSelectionChangeGoodsRow">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="仓库" align="center" prop="chukuCangkuId" >
              <template v-slot="scope">
                <el-select v-model="scope.row.chukuCangkuId"  placeholder="请选择仓库" filterable :filter-method="CKfilterValue">
                  <el-option
                    v-for="item in CKOptionsFitter"
                    :key="item.id"
                    :label="item.cangkuName"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </template>
          </el-table-column>
          <el-table-column label="商品条码" align="center" prop="goodBianma" />
          <el-table-column label="商品名称" align="center" prop="goodId" >
            <template v-slot="scope">
            <el-select v-model="scope.row.goodId" placeholder="请选择商品" @change="selectGoodsChange($event,scope.row)" filterable :filter-method="SPfilterValue">
              <el-option
                v-for="item in SPOptionsFitter"
                :key="item.id"
                :label="item.shangpinName +'  ('+ item.shangpinId+')'"
                :value="item.id"
              ></el-option>
            </el-select>
            </template>
          </el-table-column>
          <el-table-column label="商品规格" align="center" prop="goodGuige" />
          <el-table-column label="数量" align="center" prop="shuliang" >
            <template v-slot="scope">
              <el-input v-model="scope.row.shuliang" @change="shuliangChange($event,scope.row)" placeholder="请输入数量"  type="number" min="1"  oninput="value=value.replace(/^0|[^0-9]/g,'')"/>
            </template>
          </el-table-column>
          <el-table-column label="金额(￥)" align="center" prop="jine" />
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template v-slot="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="handleDeleteGoodRow(scope.row)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
      <div slot="footer" class="dialog-footer grid-xs-7">
        <span style="margin-right: 20px"> 总金额（￥）:  {{form.orderPrice}} </span>
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>


    <el-dialog title="查看销售单商品列表"  :visible.sync="goodsOpen" width="1200px" append-to-body>
        <el-table v-loading="goodsLoading" :summary-method="getSummaries"
                  show-summary   :data="chukuList"  ref="goodsTable" :height="520">
          <el-table-column label="仓库" align="center" prop="chukuCangku" />
          <el-table-column label="商品条码" align="center" prop="goodBianma" />
          <el-table-column label="商品名称" align="center" prop="goodName" />
          <el-table-column label="商品数量" align="center" prop="shuliang" />
          <el-table-column label="销售单价(￥)" align="center" prop="chukuDanjia" >
            <template v-slot="scope">
              <span>{{scope.row.chukuDanjia | rounding}}</span>
            </template>
          </el-table-column>
          <el-table-column label="商品规格" align="center" prop="goodGuige" />
          <el-table-column label="金额(￥)" align="center" prop="jine" >
            <template v-slot="scope">
              <span>{{scope.row.jine | rounding}}</span>
            </template>
          </el-table-column>
        </el-table>
<!--      <pagination-->
<!--        v-show="goodsTotal>0"-->
<!--        :total="goodsTotal"-->
<!--        :page.sync="queryGoodParams.pageNum"-->
<!--        :limit.sync="queryGoodParams.pageSize"-->
<!--        @pagination="getGoodsList"-->
<!--      />-->
      <div slot="footer" class="dialog-footer grid-xs-7">
        <el-button @click="goodsOpen = false;">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listChuku, getChuku, delChuku, addChuku, updateChuku, addSaleOrder, listOrder } from '@/api/xsgl/xsck'
import { selectlistCK } from '@/api/ckgl/kcpd'
import { listSpxx } from '@/api/ghgl/ghrk'
import { Message } from 'element-ui'

export default {
  name: "Chuku",
  data() {
    return {
      autored_disable: false,
      textarea_auto: "",
      // 遮罩层
      loading: true,
      goodsLoading: true,
      goodsTotal: 0,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      multiplegoods:true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      spid: 0,
      // 销售出库表格数据
      chukuList: [],
      orderList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      goodsOpen: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        chukuDanhao: null,
        orderDate: null,
        jiner: null,
        paymentMethod: null,
        chukuJingshouren: null,
        chukuCangku: null,
        goodId: null,
        goodName: null,
        goodGuige: null,
        shuliang: null,
        chukuDanjia: null,
        zongbudijia: null,
        dijia: null,
        beizhu: null,
        shangpinLeibie: null,
        qianghou: null,
        sjsckuan: null,
        sjscgao: null,
        wujing: null,
        zhonjine: null,
        tupian: null,
        tupian2: null,
        salesPerson: null,
        orderId: null
      },
      queryGoodParams:{
        chukuDanhao: null,
        pageNum: 1,
        pageSize: 10
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      },
      CKOptions: [],
      CKOptionsFitter: [],
      SPOptions: [],
      SPOptionsFitter: [],
      chooseGoods:[]
    };
  },
  created() {
    this.getList();
    this.selectlistCK();
    this.selectlistSP();
  },
  filters: {
    rounding (value) {
      return value.toFixed(2)
    }
  },
  updated() {
    this.$nextTick(()=>{
      if(this.$refs.goodsTable) {
        this.$refs.goodsTable.doLayout()
      }
    })
  },
  methods: {
    /** 查询销售出库列表 */
    getList() {
      this.loading = true;
      listOrder(this.queryParams).then(response => {
        this.orderList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 查询销售出库列表 */
    getGoodsList() {
      this.goodsLoading = true;
      listChuku(this.queryGoodParams).then(response => {
        this.chukuList = response.rows;
        this.goodsTotal = response.total;
        this.goodsLoading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        chukuDanhao: null,
        orderDate: new Date(),
        orderPrice: 0,
        jiner: null,
        paymentMethod: null,
        chukuJingshouren: null,
        chukuCangku: null,
        goodId: null,
        goodName: null,
        goodGuige: null,
        shuliang: null,
        chukuDanjia: null,
        zongbudijia: null,
        dijia: null,
        beizhu: null,
        shangpinLeibie: null,
        qianghou: null,
        sjsckuan: null,
        sjscgao: null,
        wujing: null,
        zhonjine: null,
        tupian: null,
        tupian2: null,
        orderGoodsList:[],
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    handleSelectionChangeGoodsRow(selection){
      this.chooseGoods = selection.map(item => item.id);
      // this.single = selection.length!==1
       this.multiplegoods = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "销售出库";
      this.$nextTick(() => {
        this.autored_disable = true;
        this.$refs.spidinput.focus();
      })

    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getChuku(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改销售出库";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          // if (this.form.id != null) {
          //   updateChuku(this.form).then(response => {
          //     this.$modal.msgSuccess("修改成功");
          //     this.open = false;
          //     this.getList();
          //   });
          // } else {

          const goodNull = this.form.orderGoodsList.filter((a)=> a.chukuCangkuId ==null || a.goodId == null || a.shuliang ==0);
          if(this.form.orderGoodsList.length<1 || goodNull.length > 0) {
            Message.error("请正确填写商品信息！")
          }else {
            addSaleOrder(this.form).then(response => {
                this.$modal.msgSuccess("出库成功");
                this.open = false;
                this.getList();
              });
            console.log(this.form);
          }
            // addChuku(this.form).then(response => {
            //   this.$modal.msgSuccess("新增成功");
            //   this.open = false;
            //   this.getList();
            // });
          // }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除销售出库编号为"' + ids + '"的数据项？').then(function() {
        return delChuku(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('xiaoshou/chuku/export', {
        ...this.queryParams
      }, `销售出库_${new Date().getTime()}.xlsx`)
    },
    handleAddRow(){
      const goodNull = this.form.orderGoodsList.filter((a)=> a.chukuCangkuId ==null || a.goodId == null || a.shuliang ==0);
      if(goodNull.length == 0) {
        this.spid = this.spid + 1;
        this.form.orderGoodsList.push(
          {
            id: this.spid,
            chukuCangkuId: this.CKOptions[0].id,
            shuliang: 1,
            jine: 0
          }
        );
      }
    },
    handleDeleteRow(){
      const goodIds =  this.chooseGoods;
      const fitterGoodList =  this.form.orderGoodsList.filter((a)=>!goodIds.some(item => a.id == item ));
      this.form.orderGoodsList =  fitterGoodList;
      this.from.orderPrice = this.form.orderGoodsList.reduce((total, item) =>  (parseFloat(total) + parseFloat(item.jine)).toFixed(2), 0);
    },
    handleDeleteGoodRow(row){
      const fitterGoodList =  this.form.orderGoodsList.filter(a=> a.id != row.id);
      this.form.orderGoodsList =  fitterGoodList;
      this.form.orderPrice = this.form.orderGoodsList.reduce((total, item) => (parseFloat(total) + parseFloat(item.jine)).toFixed(2), 0);
    },
    selectlistCK() {
      selectlistCK().then(response => {
        this.CKOptions = response.rows;
        this.CKOptionsFitter = response.rows;
      });
    },
    CKfilterValue(query) {
      if (query !== "") {
        this.CKOptionsFitter = this.CKOptions.filter((item) => {
          // 这里是用的value选项筛选，默认是label
          return item.cangkuName.indexOf(query) > -1;
        });
      } else {
        this.CKOptionsFitter = this.CKOptions;
      }
    },
    selectlistSP() {
      listSpxx().then(re => {
        this.SPOptions = re.rows;
        this.SPOptionsFitter = re.rows;
      })
    },
    SPfilterValue(query) {
      if (query !== "") {
        this.SPOptionsFitter = this.SPOptions.filter((item) => {
          // 这里是用的value选项筛选，默认是label
          return (item.shangpinName.indexOf(query) > -1 || item.shangpinId.indexOf(query) > -1);
        });
      } else {
        this.SPOptionsFitter = this.SPOptions;
      }
    },
    selectGoodsChange(val,row){
      console.log(this.form.orderGoodsList);
      const chooseGooded =  this.form.orderGoodsList.filter( item =>item.goodId == val );
      console.log(chooseGooded);
      if(chooseGooded.length>1){
        Message.error("商品已存在");
        const fitterGoodList =  this.form.orderGoodsList.filter((a)=> a.id != row.id );
        this.form.orderGoodsList =  fitterGoodList;
      }else {
        console.log(val);
        const chooseGood = this.SPOptions.filter(item => item.id == val);
        console.log(row);
        console.log(chooseGood);
        row.goodId = chooseGood[0].id;
        row.goodGuige = chooseGood[0].shangpinGuige;
        row.goodBianma = chooseGood[0].shangpinId;
        row.goodLingshoujia = chooseGood[0].shangpinLingshoujia;
        if(row.shuliang != 0 && chooseGood[0].shangpinLingshoujia!=null) {
          row.jine = (parseFloat(row.shuliang) * parseFloat(chooseGood[0].shangpinLingshoujia).toFixed(2)).toFixed(2)
        }else{
          row.jine = 0
        }
        this.form.orderPrice = this.form.orderGoodsList.reduce((total, item) => (parseFloat(total) + parseFloat(item.jine)).toFixed(2), 0);
      }
    },
    shuliangChange(val,row){
      if(row.goodLingshoujia!=null && val!=0) {
        row.jine = (parseFloat(row.goodLingshoujia).toFixed(2) * parseFloat(val).toFixed(2)).toFixed(2)
      }else{
        row.jine = 0
      }
      this.form.orderPrice = this.form.orderGoodsList.reduce((total, item) => (parseFloat(total) + parseFloat(item.jine)).toFixed(2), 0);
    },
    autoredchange(swith) {
      if (swith) {
        this.$refs.spidinput.focus();
      } else {
        this.$refs.spidinput.blur();
      }
    },
    saomablur(){
      this.autored_disable=false;
    },
    autoread(text){
      // console.log("bianhua ");
      if (text.search("\n") !== -1){
        this.textarea_auto="";
        if(text=="\n"){return;}
        const shangpin = this.SPOptions.filter(item => item.shangpinId.trim().toLowerCase() == text.trim().toLowerCase());
        if(shangpin.length>0) {
          const shangpinAdded = this.form.orderGoodsList.filter(item =>item.goodBianma == shangpin[0].shangpinId);
          if(shangpinAdded.length>0){
            shangpinAdded[0].shuliang = parseFloat(shangpinAdded[0].shuliang)>0 ? parseFloat(shangpinAdded[0].shuliang) + 1 : 1;
            shangpinAdded[0].jine = (parseFloat(shangpin[0].shangpinLingshoujia).toFixed(2) * parseFloat(shangpinAdded[0].shuliang)).toFixed(2);
          }else {
            this.spid = this.spid + 1;
            this.form.orderGoodsList.push(
              {
                id: this.spid,
                chukuCangkuId: this.CKOptions[0].id,
                shuliang: 1,
                goodId: shangpin[0].id,
                goodLingshoujia: parseFloat(shangpin[0].shangpinLingshoujia).toFixed(2),
                jine: parseFloat(shangpin[0].shangpinLingshoujia).toFixed(2),
                goodGuige: shangpin[0].shangpinGuige,
                goodBianma: shangpin[0].shangpinId
              }
            );
          }
          this.form.orderPrice = this.form.orderGoodsList.reduce((total, item) => (parseFloat(total) + parseFloat(item.jine)).toFixed(2), 0);
        }else{
          Message.error("未查到商品"+text+"，请检查商品是否录入");
        }
      }
    },
    handleViewGoods(row){
      this.queryGoodParams.chukuDanhao = row.orderId;
      this.queryGoodParams.pageNum = 1;
      this.queryGoodParams.pageSize = 9999;
      this.getGoodsList();
      this.goodsOpen = true;
      // this.$nextTick(()=>{
      //   this.$refs.goodsTable.doLayout()
      // })
    },
    getSummariesOrder(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '本页小计';
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (index === 2) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          // sums[index] += ' 元';

          sums[index] = parseFloat(sums[index]).toFixed(2);

        }
        // else {
        //   sums[index] = 'N/A';
        // }
      });
      return sums;
    },
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '总计';
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (index === 3 || index === 6) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          // sums[index] += ' 元';
        }
        if(index === 6) {
          sums[index] = parseFloat(sums[index]).toFixed(2);
        }
      });
      return sums;
    }
  }

};
</script>
<style lang="scss" scoped>
@import 'src/assets/styles/distributed.scss';

</style>
